<template>
    <h1>APP 组件</h1>
    <hr />
    <h1>原价: {{ price }} <button @click="price = 500">修改原价</button></h1>
    <h1>会员价: {{ vipPrice }}</h1>
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";

const price = ref(1000);
const vipPrice = ref(0);


// 当前侦听器会自动追踪内部书写的响应式数据(不包含赋值号左边的), 并且页面打开的时候会立即执行
watchEffect(() => {
    vipPrice.value = price.value / 2;
})

// 侦听 price 响应式对象, 会在 页面一打开的时候和 price 发生变化的时候执行
// watch(
//     price,
//     () => {
//         console.log("当前侦听器会在 price/appName 的值发生变化的时候执行");
//         vipPrice.value = price.value / 2;
//     },
//     {
//         immediate: true,
//     }
// );
</script>

<style></style>
